<template>
    <div class="page" data-page="mine" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a class="link back">
                        <i class="icon icon-back" @click="$root.backToTab()"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title">数据统计</div>
            </div>
        </div>

        <div class="page-content">
            <div class="card demo-card-header-pic rdsp-card-view" style="margin: 0;">
                <div class="card-content card-content-padding">
                        <div style="position: absolute;right: 5px;top: 5px;z-index: 2;">
                            <form style="padding-top: 10px;">
                            <span class="dataStatistics-span">近1个月</span>
                                <select class="dataStatistics-select" id="dataStatistics-select" @change="timeChange">
                                    <option value="0">今天</option>
                                    <option value="1">近7天</option>
                                    <option value="2" selected="selected">近1个月</option>
                                    <option value="3">近3个月</option>
                                </select>
                            </form>
                        </div>
                        <div class="eq_chart" id="eq_chart"></div>
                  </div>
            </div>

            <div class="list no-hairlines" style="margin: 0px;">
                  <ul>
                    <li class="item-content my_content">
                           <div class="item-inner" style="margin-left: 10px;">
                                <div class="item-title my_title">
                                    历史报警次数:
                                </div>
                                <div class="item-title my_title" id="list-1">

                                </div>
                           </div>
                     </li>
                    <li class="item-content my_content">
                           <div class="item-inner" style="margin-left: 10px;">
                                <div class="item-title my_title">
                                    历史故障次数:
                                </div>
                                <div class="item-title my_title" id="list-2">

                                </div>
                           </div>
                    </li>
                    <li class="item-content my_content">
                           <div class="item-inner" style="margin-left: 10px;">
                                <div class="item-title my_title">
                                    历史屏蔽次数:
                                </div>
                                <div class="item-title my_title" id="list-3">

                                </div>
                           </div>
                    </li>

                     <li class="item-content my_content">
                            <div class="item-inner" style="margin-left: 10px;">
                                 <div class="item-title my_title">
                                     上次报警时间:
                                 </div>
                                 <div class="item-title my_title" id="list-4">

                                 </div>
                            </div>
                     </li>


                  </ul>
             </div>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
                  fcfId:0,
                  startTime:'',
                  endTime:'',
                  eqChart:null,
            }
        },
        // Component Methods
        methods: {
            timeChange:function(){
                var self = this;
                var type  = $("#dataStatistics-select").val();
                var typeName  = jQuery("#dataStatistics-select").find("option:selected").text();
                $(".dataStatistics-span").text(typeName);

                self.getStartDate(type);
            },

            getDataStatistics: function () {
                var self = this;
                common.loading(1);
                Dao.getOneOfFcfStatistical({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    fcfId:self.fcfId,
                    startTime:self.startTime,
                    endTime:self.endTime,
                },function(data) {
                  common.loading(0);
                  jQuery("#list-1").empty();
                  jQuery("#list-2").empty();
                  jQuery("#list-3").empty();
                  jQuery("#list-4").empty();

                  jQuery("#list-1").append(common.transNullundefinedToline(data.alert)+"次");
                  jQuery("#list-2").append(common.transNullundefinedToline(data.fault)+"次");
                  jQuery("#list-3").append(common.transNullundefinedToline(data.shield)+"次");
                  jQuery("#list-4").append(common.transNullundefinedToline(data.lastAlert));

                  if ((data.alert + data.fault + data.shield) == 0) {
                      $("#eq_chart").empty();
                      if (self.eqChart) {
                          self.eqChart.dispose();
                      }
                      $("#eq_chart").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                  } else {
                      $("#eq_chart").empty();
                      if (self.eqChart) {
                          self.eqChart.dispose();
                      }
                      self.drawChart(data);
                  }
                },function(e) {
                  common.loading(0);
                  app.methods.showToastBottom("获取消防设施数据统计失败");
                });
            },
            drawChart:function(data) {
                this.eqChart = echarts.init(document.getElementById('eq_chart'));
                this.eqChart.setOption({
                    title : {},
                    tooltip : {
                        trigger : 'item',
                        formatter : "{b} : {c} ({d}%)"
                    },
                    legend : {
                        orient : 'vertical',
                        left : 'left',
                        data : [ '报警', '故障', '屏蔽' ],
                        textStyle:{color:'#999'}
                    },
                    series : [ {
                        // name: '探测器状态',
                        type : 'pie',
                        radius : '55%',
                        center : [ '50%', '60%' ],
                        data : [ {
                            value : data.alert,
                            name : '报警',
                            itemStyle: {normal:{color: '#fc304b'}}
                        }, {
                            value : data.fault,
                            name : '故障',
                            itemStyle: {normal:{color: '#ffa803'}}
                        }, {
                            value : data.shield,
                            name : '屏蔽',
                            itemStyle: {normal:{color: '#a8a8a8'}}
                        }],
                        itemStyle : {
                            emphasis : {
                                shadowBlur : 10,
                                shadowOffsetX : 0,
                                shadowColor : 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    } ]
                });
            },

            formatDateTime:function(inputTime) {
            		var date = new Date(inputTime);
            		var y = date.getFullYear();
            		var m = date.getMonth() + 1;
            		m = m < 10 ? ('0' + m) : m;
            		var d = date.getDate();
            		d = d < 10 ? ('0' + d) : d;
            		var h = date.getHours();
            		h = h < 10 ? ('0' + h) : h;
            		var minute = date.getMinutes();
            		var second = date.getSeconds();
            		minute = minute < 10 ? ('0' + minute) : minute;
            		second = second < 10 ? ('0' + second) : second;
            		return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            },

            getStartDate:function(num){
                var self = this;
                var myDate = new Date();// 获取系统当前时间
                var timeTemp = Date.parse(myDate);
                if (num == 0){
                    var startDate = new Date(myDate.setHours(0, 0, 0, 0))
                    self.startTime = self.formatDateTime(Date.parse(startDate));
                } else if (num == 1) {
                    self. startTime = self.formatDateTime(parseInt(timeTemp)- 7 * 24 * 60 * 60 * 1000);
                } else if (num == 2) {
                    self.startTime = self.formatDateTime(parseInt(timeTemp)- 30 * 24 * 60 * 60 * 1000);
                } else if (num == 3) {
                    self.startTime = self.formatDateTime(parseInt(timeTemp)- 90 * 24 * 60 * 60 * 1000);
                }
                self.endTime = self.formatDateTime(timeTemp);
                self.getDataStatistics();
            },
        },
        on: {
              pageInit: function(e, page) {
                 var self = this;
                 self.fcfId = self.$route.params.id;
                 self.getStartDate(2);
             },
        }
    }
</script>

<style scoped>
    .eq_chart{
           width: 100%;
           height: 300px;
         }
    .title{
        padding-right: 56px;
        margin: 0px auto;
    }
    .list .item-inner:after{
        height: 0px;
    }
    .my_title{
        font-size: 14px;
    }
    .list .item-content{
        min-height: 0px;
    }
    .my_content{
        height: 36px;
    }
    .calendar-modal{
        z-index: 15000;
    }
    select{
        text-align: center;
        text-align-last: center;
    }
    option{
        text-align:center;
    }
    .dataStatistics-span{
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        display: block;
        font-size: 10px;
        padding: 2px;
        border: 1px solid;
        color: #1b9cd6;
    }
    .dataStatistics-select{
        color: #fff;
        font-size: 16px;
        display: inline-block;
        z-index: 999;
        text-align: center;
        text-align-last: center;
        padding: 0;
        margin: 0;
        opacity: 0;
    }

</style>